<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router'
import slider1 from '@/components/slider1.vue';

// 使用 useRouter 创建一个 router 实例
const router = useRouter()

// const flowerSwiuper = ref([
//   { text: '精选推荐', text1: '送花HOT' },
//   { text: '花语大全', text1: '送花HOT', url: "/FlowerLanguage" },
//   { text: '文章资讯', text1: '送花HOT', url: "/ArticleVew" }
// ])
const flowerList = ref([
  { id: 1, image: '/public/images/flower01.png', text: "是很不错的创造惊喜渠道最最重要的是有东西有", text2: "Patricia", text3: "264", image2: "/public/images/flower-tx.png", image3: "/public/images/aixin1.png" },
  { id: 3, image: '/public/images/flower02.png', text: "是很不错的创造惊喜渠道最最重要的是有东西有", text2: "Patricia", text3: "264", image2: "/public/images/flower-tx.png", image3: "/public/images/aixin2.png" },
  { id: 1, image: '/public/images/flower01.png', text: "是很不错的创造惊喜渠道最最重要的是有东西有", text2: "Patricia", text3: "264", image2: "/public/images/flower-tx.png", image3: "/public/images/aixin1.png" },
  { id: 3, image: '/public/images/flower02.png', text: "是很不错的创造惊喜渠道最最重要的是有东西有", text2: "Patricia", text3: "264", image2: "/public/images/flower-tx.png", image3: "/public/images/aixin2.png" },
  { id: 1, image: '/public/images/flower01.png', text: "是很不错的创造惊喜渠道最最重要的是有东西有", text2: "Patricia", text3: "264", image2: "/public/images/flower-tx.png", image3: "/public/images/aixin1.png" },
  { id: 3, image: '/public/images/flower02.png', text: "是很不错的创造惊喜渠道最最重要的是有东西有", text2: "Patricia", text3: "264", image2: "/public/images/flower-tx.png", image3: "/public/images/aixin2.png" }
])
const flowerList1 = ref([
  { id: 2, image: '/public/images/flower04.png', text: "是很不错的创造惊喜渠道最最重要的是有东西有", text2: "Maria Marti", text3: "264", image2: "/public/images/flower-tx1.png", image3: "/public/images/aixin2.png" },
  { id: 4, image: '/public/images/flower03.png', text: "是很不错的创造惊喜渠道最最重要的是有东西有", text2: "Patricia", text3: "264a", image2: "/public/images/flower-tx1.png", image3: "/public/images/aixin2.png" },
  { id: 2, image: '/public/images/flower04.png', text: "是很不错的创造惊喜渠道最最重要的是有东西有", text2: "Maria Marti", text3: "264", image2: "/public/images/flower-tx1.png", image3: "/public/images/aixin2.png" },
  { id: 4, image: '/public/images/flower03.png', text: "是很不错的创造惊喜渠道最最重要的是有东西有", text2: "Patricia", text3: "264a", image2: "/public/images/flower-tx1.png", image3: "/public/images/aixin2.png" },
  { id: 2, image: '/public/images/flower04.png', text: "是很不错的创造惊喜渠道最最重要的是有东西有", text2: "Maria Marti", text3: "264", image2: "/public/images/flower-tx1.png", image3: "/public/images/aixin2.png" },
  { id: 4, image: '/public/images/flower03.png', text: "是很不错的创造惊喜渠道最最重要的是有东西有", text2: "Patricia", text3: "264a", image2: "/public/images/flower-tx1.png", image3: "/public/images/aixin2.png" }
])

const go = (url) => {
  router.push({ path: url })
}
</script>

<template>
  <div id="box">
    <!-- 标题 -->
    <div class="navBox">
      Flower Buy
    </div>
    <!-- 轮播盒子 -->
    <div class="flowerSwiper">
      <slider1></slider1>
    </div>
    <!-- <div class="flowerSwiper">
      <div class="flowerSwiper_box" v-for="(item, index) in flowerSwiuper " :key="index">
        <div class="flowerSwiper_box_font1">{{ item.text }}</div>
        <div class="flowerSwiper_box_font2" @click="go(item.url)">{{ item.text1 }}</div>
      </div>
    </div> -->
    <!-- 花友圈 -->
    <div class="flowerList">
      <div class="flowerList_title">花友圈</div>
      <div style="display: flex;flex-wrap: wrap;justify-content: space-between;">
        <div class="flowerList_box">
          <div class="flowerBox" v-for="(item, index) in flowerList" :key="index">
            <div class="flowerBox_img">
              <img :src="item.image" alt="">
            </div>
            <div class="flowerBox_title">
              {{ item.text }}
            </div>
            <div class="flowerBox_art">
              <div class="flowerBox_art_left">
                <img :src="item.image2" alt="">
                <div>{{ item.text2 }}</div>
              </div>
              <div class="flowerBox_art_right">
                <img :src="item.image3" alt="">
                <div>{{ item.text3 }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="flowerList_box1">
          <div class="flowerBox" v-for="(item, index) in flowerList1" :key="index">
            <div class="flowerBox_img">
              <img :src="item.image" alt="">
            </div>
            <div class="flowerBox_title">
              {{ item.text }}
            </div>
            <div class="flowerBox_art">
              <div class="flowerBox_art_left">
                <img :src="item.image2" alt="">
                <div>{{ item.text2 }}</div>
              </div>
              <div class="flowerBox_art_right">
                <img :src="item.image3" alt="">
                <div>{{ item.text3 }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
#box {
  padding-bottom: 50px;

  // 标题
  .navBox {
    padding: 20px 20px 10px;
    font-size: 18px;
  }

  // 轮播盒子
  .flowerSwiper {
    width: 95%;
    margin: auto;
    display: flex;
    justify-content: space-between;

    .flowerSwiper_box {
      width: 30%;
      padding: 15px;
      border-radius: 10px;
      box-sizing: border-box;
      color: #fff;

      .flowerSwiper_box_font1 {
        font-size: 18px;
        margin-bottom: 5px;
      }

      .flowerSwiper_box_font2 {
        font-size: 12px;
        color: rgba($color: #fff, $alpha: 0.6);
      }
    }

    .flowerSwiper_box:nth-child(1) {
      background-color: #ff8c8c;
    }

    .flowerSwiper_box:nth-child(2) {
      background-color: #ff993e;
    }

    .flowerSwiper_box:nth-child(3) {
      background-color: #50b2fc;
    }
  }

  // 花友圈
  .flowerList {
    width: 95%;
    margin: auto;

    .flowerList_title {
      font-weight: bold;
      margin: 20px 0;
    }

    .flowerList_box {
      width: 49%;

      .flowerBox {

        border-radius: 10px;
        box-shadow: 0 5px 10px #ccc;
        margin-bottom: 10px;
        overflow: hidden;

        .flowerBox_img {
          background-color: #fff;

          img {
            width: 100%;
            border-radius: 10px 10px 0 0;
          }
        }

        .flowerBox_title {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          padding: 5px 10px 0;
          box-sizing: border-box;
        }

        .flowerBox_art {
          padding: 5px 10px;
          box-sizing: border-box;
          display: flex;
          justify-content: space-between;
          margin-bottom: 10px;

          .flowerBox_art_left {
            width: 70%;
            font-size: 12px;
            display: flex;
            line-height: 30px;

            img {
              border-radius: 50%;
              width: 30px;
              margin-right: 5px;
            }
          }

          .flowerBox_art_right {
            width: 30%;
            display: flex;
            justify-content: end;
            font-size: 12px;
            line-height: 30px;

            img {
              margin-top: 8%;
              margin-right: 5px;
              width: 15px;
              height: 15px;
            }
          }
        }
      }
    }

    .flowerList_box1 {
      width: 49%;

      .flowerBox {

        border-radius: 10px;
        box-shadow: 0 5px 10px #ccc;
        margin-bottom: 10px;
        overflow: hidden;

        .flowerBox_img {
          background-color: #fff;

          img {
            width: 100%;
            border-radius: 10px 10px 0 0;
          }
        }

        .flowerBox_title {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          padding: 5px 10px 0;
          box-sizing: border-box;
        }

        .flowerBox_art {
          padding: 5px 10px;
          box-sizing: border-box;
          display: flex;
          justify-content: space-between;
          margin-bottom: 10px;

          .flowerBox_art_left {
            width: 70%;
            font-size: 12px;
            display: flex;
            line-height: 30px;

            img {
              border-radius: 50%;
              width: 30px;
              margin-right: 5px;
            }
          }

          .flowerBox_art_right {
            width: 30%;
            display: flex;
            justify-content: end;
            font-size: 12px;
            line-height: 30px;

            img {
              margin-top: 8%;
              margin-right: 5px;
              width: 15px;
              height: 15px;
            }
          }
        }
      }
    }
  }
}
</style>